<div style="margin-bottom: 1em">
    This color palette is configured to show <b>7 swatches per row</b>, has the
    <b>hue, saturation and lightness</b> sliders <b>switched off</b>, and a <b>readonly</b> hex
    input
</div>
<div style="margin-bottom: 1em; padding:1em;background: {value}">You selected <b>{value}</b></div>

<ColorPickerInput bind:color="value" />

<script>
    import ColorPickerInput from '../ColorPickerInput.html';
    import { fancyTheme } from './lib/themeStore';

    export default {
        components: { ColorPickerInput },
        data() {
            return {
                value: '#7DC462'
            };
        },
        store: () => fancyTheme
    };
</script>
